<template>
	<div>svgTest</div>

	<!-- 绝对路径和相对路径 -->
	<div>vite文件目录下，public下的资源文件对应根目录下的文件</div>
	<img  src="/svg1.svg" style="display:block;width:200px;height:200px" />
	<!-- [vite] filesin the public directory are served at the root path -->
	<!-- <img  src="/public/svg1.svg" style="display:block;width:200px;height:200px" /> -->
	<div>相对路径</div>
	<img class="imgSvg" src="../../public/svg1.svg" style="display:block;width:300px;height:200px" />
	<!-- 	<img src="../../public/back1.png" style="display:block;width:200px;height:200px" />
	<img src="/public/back1.png" style="display:block;width:200px;height:200px" /> -->
	<!-- <img src="../../public/public/svg1.svg" style="display:block;width:200px;height:200px" /> -->

	<!-- 使用div标签： -->
	<div
		style="display:block;width:200px;height:200px;background: url(/public/svg1.svg) no-repeat;background-size: 100%;">
	</div>

	<!-- 直接使用svg标签 -->
	<svg width="300" height="200">
		<rect width="100%" height="100%" fill="blue" />
		<circle cx="50" cy="50" r="50" fill="red"></circle>
	</svg>
	
	<div>我用SVG画了一个半径200px圆形，在一个400*400的画布上的话这个圆形刚刚好占满了整个画布，这时候显示没有问题.</div>
	<svg width="200" height="200">
	    <circle cx="200" cy="200" r="200" fill="#f00" stroke="none"></circle>
	</svg>
	
	<div>这里的viewBox是一个400*400的正方形，此时它的单位不是px，是一个虚拟的单位.可以计算出来的，即200px/400=0.5px。所以viewBox内部的所有数值去乘0.5px才是真正的长度大小</div>
	<svg width="200" height="200" viewBox="0 0 400 400">
	    <circle cx="200" cy="200" r="200" fill="#f00" stroke="none"></circle>
	</svg>

	<div>preserveAspectRatio：保留纵横比，它跟viewBox的关系特别密切，它表示是否强制进行统一缩放</div>
	<svg class="svgRatio" width="200" height="400" viewBox="0 0 400 400" preserveAspectRatio="">
	    <circle cx="200" cy="200" r="200" fill="#f00" stroke="none"></circle>
	</svg>
	<div>xMinYMin  将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐</div>
	<svg class="svgRatio" width="200" height="400" viewBox="0 0 400 400" preserveAspectRatio="xMinYMin">
	    <circle cx="200" cy="200" r="200" fill="#f00" stroke="none"></circle>
	</svg>

</template>

<script scoped="scoped">
	import {
		ref,
		reactive
	} from 'vue'
	// import svg1 from '../ass'
	export default {
		data() {
			return {
				svgPath: '',
			}
		},
		mounted() {},

	}
</script>

<style scoped="scoped">
	#app {
		text-align: left;
	}

	.imgSvg{
		width: 100%;
	}
	.svgRatio{
		outline: 1px solid;
	}
</style>
